<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <h3>{{title}}</h3>
        <button @click="show">显示提示框</button>
    </div>
</body>
<script src="../libs/vue.js"></script>
<script>
    // .....
    function message(ops={}){
        // 将来的vue实例
        const div = document.createElement("div");
        div.style.border = "solid 1px transparent";
        document.body.appendChild(div);

        div.innerHTML = ops.title;
        switch(ops.type){
            case "info":
                div.style.borderColor = "blue";break;
            case "error":
                div.style.borderColor = "red";break;
            case "warning":
                div.style.borderColor = "yellow";break;
            case "success":
                div.style.borderColor = "green";break;
        }

        setTimeout(()=>{
            div.style.display = "none";
            ops.close && ops.close();
        },3000);
    }


    Vue.prototype.$message = message;

    new Vue({
        el:"#app",
        data () {
            return {
                title:"message组件"
            }
        },
        methods: {
            show(){
                this.$message({
                    title:"这是信息框",
                    // type:"success",
                    type:"info",
                    // type:"warning",
                    // type:"error",
                    autoClose: true,
                    close:()=>{
                        console.log("信息框关闭了")
                    }
                });
            }
        },
    })
</script>
</html>